<template>
	<ComDetail :listIndex="10" :listTotal="1000" :tabList="tabList" :details="details" @handleTop="handleTop" @handleTab="handleTab">
		<template #left>
			<div class="detail-box">
				<detailAside ref="asideRef" @update="handleUpdate" :customerId="customerId" :bizId="bizId" />
			</div>
		</template>
		<template #tabsItem>
			<component :is="myComponent" v-if="updateFlag" :customerId="customerId"></component>
		</template>
	</ComDetail>
</template>
<script lang="ts" setup>
// import ComIndex from "@/components/ComIndex/Index.vue";
import detailAside from "./detailAside.vue";
import ComDetail from "@/components/ComDetail/Index.vue";
import dynamic from "./dynamic.vue";
const route = useRoute();
const details = ref({}); // 客户详情
const myComponent = ref(dynamic);
const tabList = ref([
	{ value: "Tab1", label: "动态", icon: "EachApp_dongtai", component: dynamic },
	{ value: "Tab2", label: "概述", icon: "EachApp_dongtai" },
	{ value: "Tab3", label: "任务", icon: "EachApp_dongtai" },
	{ value: "Tab4", label: "联系", icon: "EachApp_dongtai" },
	{ value: "Tab5", label: "画像", icon: "EachApp_dongtai" },
	{ value: "Tab6", label: "报价", icon: "EachApp_dongtai" },
	{ value: "Tab7", label: "附件", icon: "EachApp_dongtai" },
	{ value: "Tab8", label: "共享", icon: "EachApp_dongtai" }
]);
const updateFlag = ref(true);
const handleUpdate = () => {
	updateFlag.value = false;
	nextTick(() => {
		updateFlag.value = true;
	});
};
// 顶部按钮操作
const handleTop = (type) => {
	console.log("top===", type);
};
// 切换tabs-切换对应组件
const handleTab = (type) => {
	myComponent.value = tabList.value.find((item) => item.value === type)?.component;
};
const asideRef = ref({});
const bizId: any = ref("");
const customerId = ref("");

watch(
	() => route.query,
	async (data) => {
		if (data?.id) {
			bizId.value = data.bizId;
			customerId.value = data.id;
		}
	},
	{ immediate: true }
);
</script>

<style scoped lang="scss">
.field-box {
	margin: 0 16px;
	padding: 16px;
	border: 1px solid #f1f1f1;
	border-radius: 4px;
}
.detail-box {
	display: flex;
	height: 100%;
}
</style>
